前情提要;我本身是本科系相關
礙於出社會後因找軟體工程師不順遂因而先去前往系統工程師及軟韌體測試工程師任職
這個契機來至於因剛好看到免學費的方案因而對自己進行了第一次的豪賭
我們都知道現在有了AI輔助但是要學會做AI的代碼審查
今天先從最基礎的HTML/CSS開始

順便整理一下
HTML 知識結構與基礎概念
作為一名全端工程師，HTML 是網頁結構的基礎，它負責定義內容的骨架。HTML 的知識結構可以分為核心語法、元素類型、進階應用與最佳實踐。以下是系統化的整理，目的是幫助你建立扎實根基。記住，HTML5 是當前標準（自 2014 年以來），它強調語義化（semantic）以提升可讀性、可訪問性和 SEO。

1. 核心語法與結構

基本文件結構：每個 HTML 文件必須包含 、（元數據，如 、）和 （主要內容）。DOCTYPE 宣告（如 ）確保瀏覽器正確渲染。
元素與標籤：元素由開始標籤（e.g., ）、內容和結束標籤（e.g., ）組成。空元素如 不需結束標籤。理解塊級（block-level，如 ） vs. 行內（inline，如 ）元素。
屬性（Attributes）：用於修改元素行為，如 id（唯一識別）、class（樣式群組）、src（資源來源）、alt（替代文字）。全局屬性如 data-* 用於自訂數據。
巢狀與層級：元素可以巢狀，形成 DOM（Document Object Model）樹狀結構，這是 JavaScript 操作網頁的基礎。

2. 元素類型與用途

文字與內容元素： 到 （標題）、（段落）、/（強調）、//（列表）、（連結，包含 href 和 target）。
語義元素（Semantic Elements）：HTML5 引入，如 、、、、、、。這些提升結構化，讓螢幕閱讀器和搜尋引擎更好理解內容。
媒體元素：（圖片）、、（支援控制屬性如 controls、autoplay）。嵌入內容如 （內嵌外部頁面）。
表格元素：、、、、、。使用 colspan/rowspan 合併單元格。
表單元素：（包含 action 和 method）、輸入類型如 （text, email, password, checkbox, radio）、、、。驗證屬性如 required、pattern。

3. 進階概念與整合

元數據與頭部元素： 用於 charset（e.g., UTF-8）、viewport（響應式設計，如 width=device-width）、描述與關鍵字（SEO）。
可訪問性（Accessibility, ARIA）：使用 ARIA 屬性如 role、aria-label 提升無障礙。確保替代文字、焦點順序和鍵盤導航。
與其他技術整合：HTML 作為 DOM 的基礎，與 CSS（樣式）、JavaScript（互動）結合。全端工程師需了解如何在後端模板（如 Jinja 或 EJS）中生成動態 HTML。
版本差異：瞭解 HTML4 vs. HTML5 的轉變（如廢棄 ，引入 Canvas 用於繪圖）。

4. 最佳實踐與常見陷阱

驗證與標準：使用 W3C Validator 檢查 HTML 有效性。避免過時元素如 。
性能優化：最小化巢狀深度、壓縮資源、延遲載入媒體。
跨瀏覽器相容：測試在 Chrome、Firefox、Safari 等，處理瀏覽器特定行為。
安全考量：防範 XSS（Cross-Site Scripting）攻擊，避免直接插入用戶輸入而不轉義。

CSS 知識結構與基礎概念
CSS（Cascading Style Sheets）負責網頁的呈現層，包括樣式、佈局和動畫。作為全端工程師，CSS 是前端視覺實現的核心，需掌握如何與 HTML 結合，並考慮後端生成的動態樣式。知識結構可分為選擇器與規則、佈局模型、進階樣式與最佳實踐。CSS3 是當前主流，支援模組化和變數。

1. 核心語法與選擇器

規則結構：選擇器 { 屬性: 值; }。如 p { color: red; }。
選擇器類型：

基本：元素（p）、類別（.class）、ID（#id）。
組合：後代（div p）、子元素（div > p）、相鄰（h1 + p）、屬性（[type="text"]）。
偽類/偽元素：:hover、:active、::before、::after 用於互動和內容生成。

層疊與優先級（Cascade & Specificity）：樣式依來源（使用者代理、作者、使用者）層疊。優先級計算：!important > inline > ID > class/attribute > element。理解繼承（inheritance，如 color 會繼承）。

2. 盒模型與佈局

盒模型（Box Model）：每個元素是盒子，包含 content、padding、border、margin。使用 box-sizing: border-box; 避免計算錯誤。
定位（Positioning）：static（預設）、relative、absolute、fixed、sticky。結合 top/right/bottom/left。
Flexbox：一維佈局，如 display: flex;、flex-direction、justify-content、align-items。適合行/列排列。
Grid：二維佈局，如 display: grid;、grid-template-columns、grid-gap。適合複雜網格。
浮動與清除：float: left/right; 和 clear: both;（舊佈局，但 Flex/Grid 更現代）。

3. 樣式屬性與進階應用

文字與字型：font-family、font-size（單位如 px、em、rem）、line-height、text-align、color。
顏色與背景：RGB/A、HSL/A、background-image、background-size（cover/contain）。
轉換與動畫：transform（rotate, scale）、transition（平滑變化）、@keyframes 與 animation（關鍵幀動畫）。
響應式設計：媒體查詢 @media (max-width: 768px) { ... }，使用 viewport 單位（vw/vh）、fluid 佈局。
變數與函數：CSS 變數如 --primary-color: blue;、var(--primary-color)。函數如 calc()、min()、max()。

4. 最佳實踐與常見陷阱

模組化與組織：使用 BEM（Block-Element-Modifier）命名慣例避免衝突。考慮預處理器如 Sass（變數、巢狀），但基礎 CSS 也能勝任。
性能優化：最小化選擇器深度、避免過多 reflow/repaint、使用 will-change 提示瀏覽器。
跨瀏覽器與回退：使用 vendor prefixes（如 -webkit-）或 Autoprefixer。測試在不同裝置。
可訪問性：確保顏色對比（WCAG 標準）、焦點樣式（:focus）、避免隱藏內容影響螢幕閱讀器。
與框架整合：全端工程師常使用 Tailwind CSS 或 Bootstrap 加速開發，但需理解底層 CSS 以自訂。